<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>业务管理</title>
	<meta name="decorator" content="default"/>
	<script type="text/javascript">

//注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
        layui.use('element', function(){
            var element = layui.element;
        });

		$(document).ready(function() {
            var array = new Array();var array1 = new Array();var array2 = new Array();var array3 = new Array();var array4 = new Array();var array5 = new Array();var array6 = new Array();var array7 = new Array();
            <c:forEach items="${lista}" var="item" varStatus="status" >
            array.push("${item}");
            </c:forEach>
            <c:forEach items="${list1}" var="item1" varStatus="status" >
            array1.push("${item1}");
            </c:forEach>
            <c:forEach items="${list2}" var="item2" varStatus="status" >
            array2.push("${item2}");
            </c:forEach>
            <c:forEach items="${list3}" var="item3" varStatus="status" >
            array3.push("${item3}");
            </c:forEach>
            <c:forEach items="${list4}" var="item4" varStatus="status" >
            array4.push("${item4}");
            </c:forEach>
            <c:forEach items="${list5}" var="item5" varStatus="status" >
            array5.push("${item5}");
            </c:forEach>
            <c:forEach items="${list6}" var="item6" varStatus="status" >
            array6.push("${item6}");
            </c:forEach>
            <%--<c:forEach items="${list7}" var="item6" varStatus="status" >--%>
            <%--array7.push("${item7}");--%>
            <%--</c:forEach>--%>
            <c:forEach items="${list8}" var="item8" varStatus="status" >
            array7.push("${item8}");
            </c:forEach>
                $("#map").click(function () {
                    var myChart = document.getElementById("map");
                    var myChartContainer = function () {
                        myChart.style.width = window.innerWidth +'px';
                        myChart.style.height = window.innerHeight+'px';
                    };
                    myChartContainer();
                    var myChart = echarts.init(myChart);
                    var option = {
							toolbox:{
								feature:{
									saveAsImage:{}
								}
							},
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['已报案','报案未回访','已回访待受理','已受理','超期未结案','已结案','已撤单']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis:  {
                        type: 'value'
                    },
                    yAxis: {
                        type: 'category',
                        data: array
                    },
                    series: [
                        {
                            name: '已报案',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideRight'
                                }
                            },
                            data: array1
                        },
                        {
                            name: '报案未回访',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideRight'
                                }
                            },
                            data: array2
                        },
                        {
                            name: '已回访待受理',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideRight'
                                }
                            },
                            data: array3
                        },
                        {
                            name: '已受理',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideRight'
                                }
                            },
                            data: array4
                        },
                        {
                            name: '超期未结案',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideRight'
                                }
                            },
                            data: array5
                        },
                        {
                            name: '已结案',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideRight'
                                }
                            },
                            data: array6
                        },
                        {
                            name: '已撤单',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideRight'
                                }
                            },
                            data: array7
                        }
                    ]
                };

                myChart.setOption(option);
                window.onresize = function () {
                    myChartContainer();
                        myChart.resize();
				};
            })
			$("#map").trigger("click");

        });
		function page(n,s){
			$("#pageNo").val(n);
			$("#pageSize").val(s);
			$("#searchForm").submit();
        	return false;
        }
	</script>
</head>
<body>
	<ul class="nav nav-tabs">
		<li class="active"><a href="#">统计列表</a></li>
	</ul>
	<sys:message content="${message}"/>
	<table id="contentTable" class="table table-striped table-bordered table-condensed" style="width: 90%">
		<thead>
			<tr>
				<th>机构</th>
				<th>总数</th>
				<th>${fns:getDictLabel("1", 'business_static', '')}(3天内)</th>
				<th>${fns:getDictLabel("2", 'business_static', '')}（超过3天）</th>
                <th>${fns:getDictLabel("3", 'business_static', '')}</th>
                <th>${fns:getDictLabel("4", 'business_static', '')}</th>
                <th>${fns:getDictLabel("5", 'business_static', '')}（简 10 复 30）</th>
                <th>${fns:getDictLabel("6", 'business_static', '')}</th>
					<th>${fns:getDictLabel("7", 'business_static', '')}</th>
			</tr>
		</thead>
		<tbody>
		<c:forEach items="${tj}" var="tjlist">
			<tr>
				<td>
					${tjlist.name}
                </td>
				<td>
						${tjlist.num}
				</td>
				<td>
						${tjlist.st1}
				</td>
				<td>
						${tjlist.st2}
				</td>
				<td>
						${tjlist.st3}
				</td>
                <td>
						${tjlist.st4}
                </td>
                <td>
						${tjlist.st5}
                </td>
                <td>
						${tjlist.st6}
                </td>
				<td>
						${tjlist.st8}
				</td>
			</tr>
            <tr>
                <%--<td>结案率</td>--%>
                <td colspan="9">
                <div class="layui-progress layui-progress-big" lay-showPercent="yes">
                    <div class="layui-progress-bar layui-bg-blue" lay-percent="${tjlist.st7}" style="width: 95%"></div>
                </div>
            </td></tr>
		</c:forEach>
		<tr><td colspan="9"><div id="map" style="width: 80%;height:600px;" ></div></td></tr>
		</tbody>
	</table>
	<div class="pagination">${page}</div>
</body>
</html>